<template>
  <button @click="fadeInOut">显示/隐藏</button>
  <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="isShow"></div>
  </transition>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
    setup () {
        const state = reactive({
            isShow: false
        })

        const fadeInOut = () => {
            state.isShow = !state.isShow
        }
        const beforeEnter = (el) => {
            el.style.transform='translate(50px,50px)'
        }
        const enter = (el,done) => {
            el.offsetWidth
            el.style.transform='translate(150px,450px)'
            el.style.transition='all 1s ease'
            done()
        }
        const afterEnter = () => state.isShow = false
        return {
            ...toRefs(state),
            fadeInOut,
            beforeEnter,
            enter,
            afterEnter
        }
    }
}
</script>

<style scoped>
.ball {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
}
</style>